import { useEffect, useRef } from 'react'
import THREEProject from '../utils/index'
import {arrNomarlize} from '../utils/helper'
import myWorker from './../utils/worker'

const worker = myWorker
const BufferGeometryII = () => {
  // console.log('myWorker===============================>', myWorker)
  const can = useRef(null)
  const pro = new THREEProject([1, 0, 1])
  const { thr, renderer, scene, axes, camera, controls } = pro
  const fileLoader = new thr.FileLoader()
  let model = null
  const init = () => {
    const geometry = new thr.BufferGeometry()
    const material = new thr.MeshBasicMaterial({
      side: thr.DoubleSide,
      vertexColors: true,
    })
    const planeMaterial = new thr.MeshBasicMaterial({
      color: 0x00ffff,
      transparent: true,
      opacity: 0.5,
      side: thr.DoubleSide
    })
    scene.add(axes)
    const filePath = '/assets/GBD_转换经纬度后插值_2021520.json'
    console.time()
    // worker.executeFunc(['fileLoad',filePath, [10, 0.01, 10]]).then(res => {
    //   console.log('exexwexex', res)
    //   const {vertices, verticesPlane, colors} = res
    //   geometry.setAttribute('position', new thr.BufferAttribute(new Float32Array(vertices.reverse()), 3))
    //   geometry.setAttribute('color', new thr.BufferAttribute(new Float32Array(colors), 3))
    //   model = new thr.Mesh(geometry, material)
    //   const planeGeo = new thr.PlaneGeometry(1,1)
      
    //   const water = new thr.Mesh(planeGeo, planeMaterial)
    //   water.rotation.set(Math.PI * 0.5, 0, 0)
    //   scene.add(water)
    //   const mesh = new thr.Points(geometry, material)
    //   if(model) {
    //     const {attributes} = model.geometry
    //     const positions = attributes.position
    //     const colors = attributes.color
    //     count+=2 * Math.PI * 0.01
    //     if(count > 2 * Math.PI) { count = 0 }
    //     for(let idx in positions.array) {
    //       if(idx % 3 === 1) {
    //         if(attributes.position.array[idx] > 0) {
    //           colors.array[idx] = 0.5
    //           colors.array[idx-1] = 0.5
    //         } else {
    //           colors.array[idx] = 0
    //         }
            
    //       }
    //     }
    //     colors.needsUpdate = true
    //   } 
    //   scene.add(model)
    //   console.timeEnd()
    // })
    fileLoader.load('/assets/GBD_转换经纬度后插值_2021520.json', res => {
      console.log('dataJSON', JSON.parse(res).data)
      const {vertices, verticesPlane, colors} = arrNomarlize(JSON.parse(res).data, [10, 0.01, 10])
      geometry.setAttribute('position', new thr.BufferAttribute(new Float32Array(vertices.reverse()), 3))
      geometry.setAttribute('color', new thr.BufferAttribute(new Float32Array(colors), 3))
      geometry.computeBoundingBox()
      model = new thr.Mesh(geometry, material)
      const planeGeo = new thr.PlaneGeometry(1,1)
      const water = new thr.Mesh(planeGeo, planeMaterial)
      water.rotation.set(Math.PI * 0.5, 0, 0)
      scene.add(water)
      const mesh = new thr.Points(geometry, material)
      if(model) {
        const {attributes} = model.geometry
        const positions = attributes.position
        const colors = attributes.color
        count+=2 * Math.PI * 0.01
        if(count > 2 * Math.PI) { count = 0 }
        for(let idx in positions.array) {
          if(idx % 3 === 1) {
            if(attributes.position.array[idx] > 0) {
              colors.array[idx] = 0.5
              colors.array[idx-1] = 0.5
            } else {
              colors.array[idx] = 0
            }
            
          }
        }
        colors.needsUpdate = true
      } 
      scene.add(model)
      console.timeEnd()
    })
    scene.add(new thr.AmbientLight(0xffffff))
    appendRenderDom()
    animate()
  }


  const appendRenderDom = () => {
    if(!can.current.children.length) {
      can.current.appendChild(renderer.domElement)
    }
  }
  let count = 0
  const render = () => {
    controls.update()
    
    
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    render()
  }

  useEffect(init, [])

  return (
    <div ref={can}></div>
  )
}

export default BufferGeometryII
export {
  BufferGeometryII
}